<template>
  <div>
    <div class="Sharing-backgound" ></div>
    <div class="sharing-content">
      <img src="../../assets/wenan.png" alt="">
      <p class="sharing-p">输入好友的邀请码，并关注蓝驴公众号，即可获得海量优惠</p>
      <input type="text" placeholder="请输入邀请码" v-model="VerificationCode" >
      <button @click="onButton" class="sharing-buyyon">立即关注</button>
      <div>此活动最终解释权归蓝驴生活所有</div>
    </div>
    <div class="message" v-if="isShow">你还没有输入验证码</div>
  </div>
</template>

<script>
// 分享页面
export default {
  name: 'SharingPublicNumber',
  data () {
    return {
      isShow: false,
      VerificationCode: ''
    }
  },
  methods: {
    onButton () {
      if (
        this.VerificationCode !== ''
      ) {
        alert('成功')
        this.VerificationCode = ''
      } else {
        this.isShow = !this.isShow
        let _this = this
        setTimeout(function name () {
          _this.isShow = false
        }, 2000)
      }
    }
  },
  created: () => {
    document.title = '邀请好友'
  }
}
</script>

<style lang='scss' scoped>
.Sharing-backgound {
  width: 100%;
  height: 57vw;
  background: url("../../assets/beiyaoqing.png");
  background-size: 100% 57vw;
}
.sharing-content {
  background:rgba(255,255,255,1);
  display: flex;
  flex-direction:column;
  align-items: center;
  img {
    margin-top:5.33vw;
    width: 86.66vw;
    height: 14.66vw;
    margin-bottom: 4.53vw;
  }
  .sharing-p {
    width:86.66vw;
    height:9.6vw;
    font-size:3.73vw;
    font-family:SourceHanSansCN-Normal;
    font-weight:400;
    color:rgba(134,134,134,1);
    line-height:5.8vw;
  }
  input {
    box-sizing: border-box;
    width:86.66vw;
    height:12.2vw;
    background:rgba(242,242,242,1);
    border-radius:0.8vw;
    font-size:4.5vw;
    font-weight:400;
    color:rgba(168,168,168,1);
    padding-left: 3.4vw;
    border: 0;
    margin-top:8vw;
  }
  .sharing-buyyon {
    width:86.66vw;
    height:12.2vw;
    background:rgba(10,109,255,1);
    border-radius:0.8vw;
    border: 0;
    font-size:4.5vw;
    font-family:SourceHanSansCN-Normal;
    font-weight:400;
    color:rgba(255,255,255,1);
    margin-top:6.66vw;
  }
  div {
    width: 93.3vw;
    height:8vw;
    background:rgba(255,255,255,1);
    font-size:2.66vw;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(192,192,192,1);
    text-align: center;
    line-height: 8vw;
    margin: 13.3vw 0 4vw 0;
  }
}
.message {
  background:rgba(0,0,0,1);
  border-radius:0.53vw;
  opacity:0.8;
  width: 84vw;
  height: 10.4vw;
  text-align: center;
  line-height: 10.4vw;
  font-size: 4.26vw;
  font-family: SourceHanSansCN-Regular;
  font-weight: 400;
  position: absolute;
  top: 76vw;
  left: 8vw;
  color:rgba(255,255,255,1)
}
</style>
